<template>
	<view class="container">
		<!-- <view class="coupon_sort" v-if="sort.length>0">
			<view class="sort_unit" v-for="(item,index) in sort" :key="index" :id="item.store_id" v-on:click="merchant_list">
				<image :src="url+item.img"></image>
				<view class="sort_name">{{item.store_sort_name}}</view> 
			</view>
		</view> -->
		<view class="merchant" v-for="(item,index) in result" :key="index" v-if="result.length>0">
			<view class="merchant_unit" :id="item.store_id" v-on:click="shop_home">
				<image class="merchant_pic" :style="{height:merchant_pic}" mode="aspectFill" :src="url+item.img" v-if="item.img!='0'"></image>
				<image class="merchant_pic" :style="{height:merchant_pic}" mode="aspectFill" :src="static+'/logo.png'" v-else></image>
				<view class="merchant_con" :style="{height:merchant_pic}">
					<view class="merchant_name">{{item.name}}</view>
					<view class="address">{{item.address}}</view>
					<view class="merchant_tag">{{item.store_sort_name}}</view>
				</view>
			</view>
			<view class="coupon_unit" v-for="(value,key) in item.coupon" :key="key" :id="value.coupon_id">
				<view class="coupon_con">
					<view class="coupon_title">{{value.coupon_name}}</view>
					<view class="coupon_integral">所需积分<text>{{value.exchange_price}}</text></view>
				</view>
				<view class="coupon_operate" :id="value.coupon_id" v-on:click="coupon_detail">兑换</view>
			</view>
		</view>
		<view class="none" v-if="result.length==0">没有商户信息</view>
	</view>
</template>
<style>
	/******************/
	.none{width:100%;line-height: 80upx;text-align: center;font-size: 28upx;}
	.merchant{width:92%;margin:20upx 2%;padding:10upx 2%;border-radius: 20upx;background: #FFFFFF;}
	.merchant_unit{width:100%;display: flex;justify-content: flex-start;align-items: center;padding:10upx 0;}
	.merchant_pic{width:20%;overflow: hidden;border-radius: 10upx;background: #24C3A4;}
	.merchant_con{width:70%;margin-left:20upx;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;}
	.merchant_name{font-size: 28upx;color: #333333;}
	.address{font-size: 28upx;color: #999999;}
	.merchant_tag{background: #E03636;color: #FFFFFF;padding:10upx 20upx;border-radius: 10upx;font-size: 24upx;}
	.coupon_unit{width:90%;padding:10upx 5%;background-image: url("https://zhangjie.jdmuguzhid.com/static/images/yztang/bg2.png");background-repeat: no-repeat;background-size: 100% auto;
	display: flex;justify-content: space-between;align-items: center;margin:10upx 0;/* background-image: linear-gradient(to right,#fff0ed, #ffdbc8); */}
	.coupon_con{width:80%;height: 100upx;}
	.coupon_title{font-size: 32upx;color: #333333;}
	.coupon_integral{font-size: 28upx;color: #999999;}
	.coupon_integral text{color: #E03636;padding-left: 10upx;font-size: 32upx;}
	.coupon_operate{width:18%;height: 60upx;line-height: 60upx;color: #FFFFFF;text-align: center;font-size: 28upx;
	background-image: linear-gradient(#43eac9, #24c3a4);border-radius: 30upx;}
	
	/******************/
	.coupon_sort{width:96%;padding:10upx 2%;display: flex;justify-content: space-between;align-items: center;height: 130upx;background: #FFFFFF;}
	.sort_unit{width:20%;height: 130upx;display: flex;justify-content: space-between;align-items: center;flex-direction: column;}
	.sort_unit image{width:80upx;height: 80upx;}
	.sort_name{font-size: 28upx;line-height: 35upx;}
	
	/******************/
	.record{width:96%;padding:10upx 2%;display: flex;justify-content: space-between;align-items: center;height: 80upx;background: #FFFFFF;color: #666666;}
	.integral{font-size: 28upx;font-weight: bold;}
	.integral text{font-size: 32upx;color: #E03636;font-weight: bold;padding-left:20upx;}
	.record_link{font-size: 28upx;}
	/******************/
	.swiper{margin: 20upx 0 10upx 0;width:100%;}
	.top_fixed{height: 80upx;margin:0 3% 20upx 3%;width:94%;position: fixed;top:0;left:0;z-index: 999;}
	.sort{height: 80upx;margin:0 3% 20upx 3%;width:94%;}
	.nav{height: 80upx;background-color:#717171; display: flex;align-items: center;justify-content: flex-start;flex-wrap: nowrap;}
	.button{width: 280upx;height: 40upx;line-height: 40upx;  font-size: 28upx;text-align: center;color: #FFFFFF;border-right: 1px solid #FFFFFF;}
	.button:first-child{border:none !important;}
	.font-color{color: #FFFFFF;font-weight: bold;background: #f27e41;height: 80upx;line-height: 80upx;}
	/******************/
	page,.container{background: #f4f4f4;}
	.lh{height: 120upx;width: 100%;}
	.foot{width:98%;padding:10upx 1% 10upx 1%;background: #FFFFFF;height: 90upx;display: flex;
		  justify-content: space-between;align-items: center;position: fixed;bottom:0;left:0;}
	.foot_unit{width:20%;display: flex;flex-direction: column;justify-content:space-between;
	           align-items: center;height: 80upx;}
	.foot_unit image{width:40upx;height: 40upx;}
	.add{width:80upx;display: flex;justify-content: center;align-items: center;height: 80upx;}
	.add image{width:80upx;height: 80upx;}
	.foot_unit_name{font-size: 24upx;color: #b5b5b5;}
	.foot_current{color: #3de9c7 !important;}
	/**********************************************/
</style>
<script>
	export default {
		data() {
			return {
				name:'',
				pic_h:'',
				merchant_pic:'',
				banner:[{'adv_id':1,'type':3,'img':'/static/images/yztang/banner1.jpg'}],
				banner_w:'',
				banner_h:'',
				result:[],
				member:[],
				sort:[],
				height:'',
				start:0,
				id:0,
				url: getApp().globalData.url,
				static:getApp().globalData.static,
				tab_current:'integral'
			}
		},
		onLoad(e) {
			var res = uni.getSystemInfoSync();
			var w = res.windowWidth;
			this.banner_w = w+"px";
			this.banner_h = w*9/16+"px";
			this.merchant_pic = w*0.92*0.2+"px";
			this.height = res.windowHeight+"px";
			// const scene = decodeURIComponent(e.scene);
			// var upid    = uni.getStorageSync("upid");
			// if(scene=="undefined"||scene==undefined)
			// {
			// 	if(upid=="" || upid==undefined || upid=="undefined")
			// 	{
			// 		if(e.upid==undefined)
			// 		{
			// 			uni.setStorageSync("upid",0);
			// 		}
			// 		else
			// 		{
			// 			uni.setStorageSync("upid",parseInt(e.upid));
			// 		}
			// 	}
			// }
			// else
			// {
			// 	uni.setStorageSync("upid",scene);
			// }
			this.id = e.id;
		},
		onShow(){
			this.initialize();
		},
		onReachBottom:function()
		{
			this.initialize();
		},
		methods: {
			merchant_list:function(e)
			{
				var id = e.currentTarget.id;
				uni.navigateTo({
					url:"merchant_list?id="+id
				})
			},
			record:function()
			{
				uni.navigateTo({
					url:"../member/coupon?status=1"
				})
			},
			coupon_detail:function(e)
			{
				var id = e.currentTarget.id;
				uni.navigateTo({
					url:"coupon_detail?id="+id
				})
			},
			shop_home:function(e)
			{
				var id = e.currentTarget.id;
				console.log("商户ID"+id);
				uni.navigateTo({
					url:"home?id="+id
				})
			},
			input_:function(e)
			{
				if(e.currentTarget.dataset.name=="name")
				{
					this.name = e.target.value;
				}
			},
			search:function()
			{
				if(this.name=="")
				{
					uni.showToast({
						title:"不能为空",
						duration:2000
					})
				}
				else
				{
					uni.navigateTo({
						url:"/pages/mall/search?name="+this.name
					})
				}
			},
			foot_operation:function(e)
			{
				var id = e.currentTarget.id;
				if(id!=this.tab_current)
				{
					switch(id)
					{
						case 'home' :{uni.reLaunch({url:"../index/index"});break;}
						case 'mall' :{uni.reLaunch({url:"../mall/index"});break;}
						case 'cart' :{uni.reLaunch({url:"../mall/cart"});break;}
						case 'integral' :{uni.reLaunch({url:"../merchant/index"});break;}
						case 'sort' :{uni.reLaunch({url:"../mall/sort_index"});break;}
						case 'member' :{uni.reLaunch({url:"../member/index"});break;}
					}
				}
			},
			initialize:function()
			{
				var that = this;
				var member_id = uni.getStorageSync("member_id");
				uni.request({
					url: this.url+"/wechat_store_sort",
					data: {store_sort_id:this.id,start:this.start},
					header: {'Content-Type': 'application/json'},
					success: function (res) 
					{
						console.log(res.data);
						if(res.data.status==1)
						{
							that.start += 10;
							for(var i=0;i<res.data.store_result.length;i++)
							{
								that.result.push(res.data.store_result[i]);
							}
						}
						console.log(that.result.length);
					}
				})
			}
		}
	}
</script>


